﻿@page "/docs/components/divider"

<Seo Canonical="/docs/components/divider" Title="Blazorise Divider component" Description="The divider component is used to separate sections of lists or layouts." />

<DocsPageTitle>
    Divider component
</DocsPageTitle>

<DocsPageParagraph>
    The <Code Tag>Divider</Code> component is used to separate sections of lists or layouts.
</DocsPageParagraph>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic">
        Dividers in their simplest form display a horizontal line.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <SolidDividerExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="SolidDividerExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Dashed">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <DashedDividerExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DashedDividerExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Dotted">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <DottedDividerExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DottedDividerExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Text Content">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TextContentDividerExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TextContentDividerExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Attributes
</DocsPageSubtitle>

<DocsAttributes>
    <DocsAttributesItem Name="DividerType" Type="DividerType" Default="Solid">
        Specifies horizontal line style variants.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Text" Type="string" Default="null">
        Label that will appear between the solid lines.
    </DocsAttributesItem>
</DocsAttributes>